<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="nav">
			<view class="navs">
				<view class="nav-item" @tap="changeTab(index)" v-for="(item,index) in navList" :key="index">
					<view class="name" :class="{active:currentTab==index}">
						{{item.name}}
					</view>
					<view class="iconbox" v-if="index==1||index==2">
						<uni-icons class="up" type="arrowup" :color="item.iconStatus=='up'?'#dd524d':'#fff'" size="12">
						</uni-icons>
						<uni-icons class="down" type="arrowdown" :color="item.iconStatus=='down'?'#dd524d':'#fff'"
							size="12"></uni-icons>
					</view>
				</view>

			</view>
		</view>
		<view class="container-c">
			<view class="productlist">
				<view class="item" v-for="item in productList" :key="item.id" @tap="goInfo(item.id)">
					<image :src="item.pic" mode=""></image>
					<view class="text">
						<view class="name">
							{{item.name}}
						</view>
						<view class="info">
							<text class="price">¥{{item.price}}元</text>
							<text class="bufan">不凡</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<text class="bottom">没有更多数据了</text>
	</view>
</template>

<script>
	import {
		findProductList
	} from "@/api/list/index.js"
	export default {
		data() {
			return {
				id: "",
				start: 1,
				limit: 5,
				total: 0,
				productList: [],
				navList: [{
						name: "新品",
						iconStatus: "default"
					},
					{
						name: "销量",
						iconStatus: "default"
					},
					{
						name: "价格",
						iconStatus: "default"
					},
					{
						name: "筛选",
						iconStatus: "default"
					}
				],
				currentTab: 0,
				isDesc: 0, //0降序  1升序
				sortBy: "" //sale price
			};
		},
		// 上拉加载更多数据
		onReachBottom() {
			if (this.total > this.productList.length) {
				this.init()
			} else {
			}
		},
		// 下拉刷新页面
		onPullDownRefresh() {
			this.start = 1;
			this.productList = [];
			this.init()
		},
		onLoad(options) {
			console.log(uni.getSystemInfoSync())
			// console.log(options)
			this.id = options.id;
			this.init()
		},
		methods: {
			init(val) {
				var paramsObj = {
					"categoryId": this.id,
					"isDesc": this.isDesc,
					"sortBy": this.sortBy
				}
				findProductList(this.start, this.limit, paramsObj).then(res => {
					console.log(res)
					this.productList.push(...res.data.rows);
					this.start++
					this.total = res.data.total;
					uni.stopPullDownRefresh();
				})
			},
			// 点击导航栏
			changeTab(val) {
				console.log(val)
				this.currentTab = val;
				this.start = 1;
				this.productList = [];
				// 排他
				this.navList.forEach((ele, index) => {
					if (index == val) {} else {
						ele.iconStatus = "default"
					}
				})
				var item = this.navList.find((ele, index) => index == val)
				if (item.iconStatus == "default") {
					item.iconStatus = "up";
					this.isDesc = 1;
				} else if (item.iconStatus == "up") {
					item.iconStatus = "down";
					this.isDesc = 0;
				} else {
					item.iconStatus = "up";
					this.isDesc = 1;
				}
				if (val == 1) {
					this.sortBy = "sale"
				} else if (val == 2) {
					this.sortBy = "price"
				} else {
					this.sortBy = ""
				}
				this.init()
			},
			goInfo(id){
				uni.navigateTo({
					url:`/pages/list/info/info?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		background-color: #f1ece7;
		height: 100vh;
	}

	.container-c {
		width: 670rpx;
		margin: 0 auto;
	}

	.productlist {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		.item {
			width: 316rpx;

			image {
				width: 100%;
				height: 238rpx;
				margin-top: 40rpx;
			}

			.text {
				padding: 36rpx;
				background-color: #fff;
				border-radius: 0rpx 0rpx 10rpx 10rpx;

				.name {
					font-size: 26rpx;
					font-weight: 700;
					line-height: 38rpx;
					margin-top: 8rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.info {
					font-size: 26rpx;
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
				}
			}

		}
	}

	.nav {
		background-color: #354e44;
		margin-top: -1rpx;

		.navs {
			width: 670rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 20rpx 0;

			.nav-item {
				font-size: 30rpx;
				color: #fff;
				display: flex;
				align-items: center;

				.iconbox {
					display: flex;
					align-items: center;
					flex-direction: column;

					.down {
						margin-top: -10rpx;
					}
				}
			}
		}
	}

	.active {
		color: #dd524d;
	}

	.bottom {
		display: block;
		font-size: 30rpx;
		color: #777;
		text-align: center;
		margin-top: 50rpx;
	}
</style>
